block ../../layout.pug

block style 
  link(rel="stylesheet", href="/stylesheets/webapi/WebAnimationApi/examples.css")

block content  
  include ../documentPath.pug

  div.main
    div.example-block
      h2 扩大元素
      p 动态扩大一个元素高度，显示更多信息
      form.expand-element-config
        p
          input(type="range" min="0.05" max="5" step="0.05")#eec-duration-input
          span 一次动画时长：
          span#eec-duration
        p 
          input(type="range" min="0" max="500" step="1")#eec-height-input
          span 扩大的高度：
          span#eec-height
        p 
          span 扩大时的缓动函数：
          select#ecc-expand-easing
            option(value="linear" Selected) Linear 
            option(value="ease-in") Ease In
            option(value="ease-out") Ease Out
            option(value="ease-in-out") Ease In Out
        p 
          span 收缩时的缓动函数：
          select#ecc-collapse-easing
            option(value="linear" Selected) Linear 
            option(value="ease-in") Ease In
            option(value="ease-out") Ease Out
            option(value="ease-in-out") Ease In Out
        div#eec-content
          h3 Here is lots of content which can be expanded
          p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur finibus nisi at massa accumsan, et aliquet lacus consequat. Proin ultricies leo augue, dignissim placerat ipsum imperdiet sit amet. Nullam iaculis neque ac eros dapibus, vitae pellentesque eros faucibus. Curabitur dignissim lobortis tortor, in viverra nisi congue sit amet.

  script(src="/javascripts/webapi/WebAnimationApi/ExpandElementConfig.js") 